import Component from "../Component.js";

export default class Uploader extends Component{
    constructor() { super(); }

    async uploadDwg(name, code, sign, type, piece, version) {
        const file = new FormData();
        const field = document.querySelector("input[type='file']");
        file.append("file", field.files[0]);
        file.append('name', name);
        file.append('code', code);
        file.append('sign', sign);
        file.append('type', type);
        file.append('piece', piece);
        file.append('version', version);

        const fileName = field.files[0].name;
        const len = fileName.length;
        const dotDxf = fileName.substring(len-3, len);
        if (dotDxf === 'dwg') {
            this.app.dialog.preloader("正在上传图纸...");
            const data = await this.api.uploadDwg(file);
            this.app.dialog.close();
            if (data.code === 0) {
                this.toast('图档上传成功。');
            } else {
                this.toast('服务器异常,请重新上传。');
            }
        } else {
            this.toast('请选择AutoCAD的.dwg格式的文件,其他格式文件无效。')
        }
    }

    async uploadDxf(name, code, sign, type, piece, version) {
        const file = new FormData();
        const field = document.querySelector("input[type='file']");
        file.append("file", field.files[0]);
        file.append('name', name);
        file.append('code', code);
        file.append('sign', sign);
        file.append('type', type);
        file.append('piece', piece);
        file.append('version', version);

        const fileName = field.files[0].name;
        const len = fileName.length;
        const dotDxf = fileName.substring(len-3, len);
        if (dotDxf === 'dxf') {
            this.app.dialog.preloader("正在上传图纸...")
            const data = await this.api.uploadDxf(file);
            this.app.dialog.close();
            if (data.code === 0) {
                this.toast('图档上传成功。');
            } else {
                this.toast('服务器异常,请重新上传。');
            }
        } else {
            this.toast('请选择AutoCAD的.dwg格式的文件,其他格式文件无效。');
        }
    }

    template() {
        const upload_popup_div = `
            <div class="popup upload-popup" style="width: 460px; height: 420px;">
                <header>导入图档</header>
                <article>
                    <div class="list inline-labels no-hairlines-md">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-title item-label">煤矿名称</div>
                                <div class="item-inner">
                                    <span id="upload-mine-name"></span>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-title item-label">煤矿编码</div>
                                <div class="item-inner">
                                    <span id="upload-mine-code"></span>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-title item-label">标志/煤层</div>
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="upload-mine-sign">
                                            <select id="upload-mine-sign"></select>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-title item-label">类型编码</div>
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="upload-mine-type">
                                            <select id="upload-mine-type"></select>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-title item-label">图件编码</div>
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="upload-mine-piece">
                                            <select id="upload-mine-piece"></select>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-title item-label">图件版本</div>
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="upload-mine-piece">
                                            <select id="upload-mine-version"></select>
                                        </label>
                                    </div>
                                </div>
                            </li>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <input type="file" name="upload" accept=".dxf" />
                                </div>
                            </li>
                        </ul>
                    </div>
                </article>
                <footer>
                    <button class="button button-fill color-orange popup-close" id="upload-popup-submit">确定</button>
                    <button class="button button-fill color-gray popup-close">取消</button>
                </footer>
            </div>
        `;
        this.$$('#app').append(upload_popup_div);
    }

    control() {
        this.$$("#upload-popup").on("click", async () => {
            this.$$(".upload-popup").css('left', this.utils.left(460));
            this.popup = this.app.popup.create({ el: '.upload-popup' });
            this.popup.open();

            const mine = this.utils.getLocalStorage('mine');
            if (mine === null) {
                this.toast("没有煤矿信息,请先选择煤矿。");
                this.popup.close();
                return;
            }

            const code = this.utils.getLocalStorage('code')
            this.$$("#upload-mine-name").html(mine.name);
            this.$$("#upload-mine-code").html(mine.code);

            this.$$("#upload-mine-sign").empty()
            for (const key in code.Sign) {
                if (code.Sign.hasOwnProperty(key)) {
                    const sign = code.Sign[key];
                    const option = `<option value="${sign.key}">${sign.desc}</option>`;
                    this.$$("#upload-mine-sign").append(option);
                }
            }

            this.$$("#upload-mine-type").empty();
            for (const key in code.MapType) {
                if (code.MapType.hasOwnProperty(key)) {
                    const sign = code.MapType[key];
                    const option = `<option value="${sign.key}">${sign.desc}</option>`;
                    this.$$("#upload-mine-type").append(option);
                }
            }

            this.$$("#upload-mine-piece").empty()
            for (const desc of code.MapType2Assembly.A.desc) {
                const option = `<option value="${desc[0]}">${desc[1]}</option>`;
                this.$$("#upload-mine-piece").append(option);
            }

            this.$$("#upload-mine-version").empty();
            for (let i = 0; i < 12; i++) {
                const result = moment().subtract(i, "months").format('YYYY-MM');
                const option = `<option value="${result}">${result}</option>`;
                this.$$("#upload-mine-version").append(option);
            }

            // 当类型发生改变时，图件类型也要随之改变
            this.$$("#upload-mine-type").on("change", async (val) => {
                const type = this.$$("#upload-mine-type").val();
                this.$$("#upload-mine-piece").empty();
                for (const key in code.MapType2Assembly) {
                    if (type === key) {
                        if (code.MapType2Assembly.hasOwnProperty(key)) {
                            for (const desc of code.MapType2Assembly[key].desc) {
                                const option = `<option value="${desc[0]}">${desc[1]}</option>`;
                                this.$$("#upload-mine-piece").append(option);
                            }
                        }
                    }
                }
            })

            this.$$("#upload-popup-submit").on("click", async () => {
                this.delay('submit', async () => {
                    const name = this.$$("#upload-mine-name").html();
                    const code = this.$$("#upload-mine-code").html();
                    const sign = this.$$("#upload-mine-sign").val();
                    const type = this.$$("#upload-mine-type").val();
                    const piece = this.$$("#upload-mine-piece").val();
                    const version = this.$$("#upload-mine-version").val();
                    this.popup.close();
                    await this.uploadDxf(name, code, sign, type, piece, version);
                }, 300);
            })
        })
    }
}